<template>
  <div class="login-container">
    <h2>普通人的编程知识朋友圈</h2>
    <p>编程学习朋友圈</p>
    
    <!-- 错误提示 -->
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
    
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="username">账号</label>
        <input type="text" id="username" v-model="username" placeholder="请输入账号" required>
      </div>
      
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" placeholder="请输入密码" required>
      </div>
      
      <div class="form-group options">
        <div class="remember-me">
          <input type="checkbox" id="remember" v-model="remember">
          <label for="remember">自动登录</label>
        </div>
        
        <div class="links">
          <router-link to="/register">新用户注册</router-link>
          <router-link to="/forgot">忘记密码</router-link>
        </div>
      </div>
      
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      remember: false, // 补充 remember 的数据绑定
      errorMessage: ''
    }
  },
  methods: {
    async handleLogin() {
      // 1. 定义本地管理员账号（无需后端验证）
      const localAdmin = {
        username: 'admin', // 管理员账号
        password: '123456', // 管理员密码
        token: 'local-admin-token-123456' // 本地生成的管理员 token
      };

      // 2. 检查是否是本地管理员登录
      if (this.username === localAdmin.username && this.password === localAdmin.password) {
        // 管理员登录成功（无需调用后端接口）
        localStorage.setItem('token', localAdmin.token);
        localStorage.setItem('username', localAdmin.username);
        
        // 如果勾选了自动登录，可额外存储（可选）
        if (this.remember) {
          localStorage.setItem('remember', 'true');
        } else {
          localStorage.removeItem('remember');
        }
        
        this.$router.push({ name: 'Welcome' });
        return; // 结束函数，不执行后续后端请求
      }

      // 3. 非管理员账号，正常调用后端接口（原有逻辑）
      try {
        const response = await this.$axios.post('/auth/login', {
          username: this.username,
          password: this.password
        });
        
        localStorage.setItem('token', response.token);
        localStorage.setItem('username', response.username);
        
        if (this.remember) {
          localStorage.setItem('remember', 'true');
        } else {
          localStorage.removeItem('remember');
        }
        
        this.$router.push({ name: 'Welcome' });
      } catch (error) {
        console.error('登录失败:', error);
        this.errorMessage = '登录失败，请检查用户名和密码';
      }
    }
  },
  // 页面加载时，若勾选了自动登录，可自动填充账号（可选优化）
  mounted() {
    if (localStorage.getItem('remember') === 'true') {
      this.username = localStorage.getItem('username') || '';
      this.remember = true;
    }
  }
}
</script>

<style scoped>
/* 补充错误提示的样式 */
.error-message {
  color: #f5222d;
  margin-bottom: 15px;
  font-size: 14px;
  text-align: center;
}

/* 原有样式保持不变 */
.login-container {
  width: 350px;
  margin: 0 auto;
  padding: 40px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

h2 {
  color: #1890ff;
  margin-bottom: 10px;
  text-align: center;
}

p {
  color: #8c8c8c;
  margin-bottom: 30px;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-group.options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.remember-me {
  display: flex;
  align-items: center;
}

.remember-me input {
  width: auto;
  margin-right: 5px;
}

.links {
  display: flex;
  gap: 15px;
}

.links router-link {
  color: #1890ff;
  text-decoration: none;
  font-size: 14px;
}

button {
  width: 100%;
  padding: 12px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #40a9ff;
}
</style>